<template>
    <view class="pay-container">
        <view class="title">Investment Amount</view>
        <view class="input-wrap">
            <view class="label">$</view>
            <view class="content">
                <picker
                    @change="
                        (e) => {
                            bindPickerChange(e, 'typeKey');
                        }
                    "
                    :value="moneyKey"
                    :range="moneyList"
                >
                    <view :class="['uni-input', moneyKey < 0 && 'grey']">
                        {{ moneyKey >= 0 ? payList[moneyKey] : 'Please select Amount' }}
                    </view>
                </picker>
            </view>
        </view>
        <view class="form-tips">Available Balance ${{ formatAmount(userInfo.balance - userInfo.freezeBalance + userInfo.rebate) }}</view>
        <view class="coupon-item" @click="onCoupon">
            <view class="name">
                Coupons
                <text v-if="isUsed">Addition{{ coupons.addedRate * 100 }}%</text>
            </view>
            <view class="content">
                <text v-if="isUsed">Used</text>
                <wd-icon name="chevron-right" color="#000" size="40rpx"></wd-icon>
            </view>
        </view>
        <view :class="['btns', amount && 'active']" @click="onSubmit">Submit</view>
    </view>
    <uni-popup ref="couponsRef">
        <view style="height: 100vh; background: #fff; overflow-y: auto">
            <Coupons type="pay" @onClose="onClose" />
        </view>
    </uni-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Coupons from '@/pages/coupons/index';
import { formatAmount, getStorage, showToast } from '@/utils/common';
import { onLoad } from '@dcloudio/uni-app';
import { addOrder } from '@/api/order';

const emits = defineEmits(['onClose']);
const props = defineProps({
    goodsInfo: {
        type: Object,
        default: () => {
            return {};
        }
    }
});

const userInfo = ref({}) as any;




const detail = ref<any>(props.goodsInfo);

const couponsRef = ref(null) as any;
const amount = ref<number>(0);
const coupons = ref<any>({});
const moneyKey = ref<any>(-1);
const moneyList = ref<any>([]);
const payList = ref<any>([]);
const isUsed = ref<boolean>(false);

onLoad(() => {
    const minPrice = detail.value.minPrice;
    const maxPrice = detail.value.maxPrice;
    userInfo.value = getStorage('user') || {};
    let rebateRatio = userInfo.value.rebateRatio;
    moneyList.value.push(`${minPrice}(profit:${formatAmount(minPrice * rebateRatio) })`);
    payList.value.push(minPrice);
    for (let i = 1; i < 4; i++) {
        const price: any = ((maxPrice - minPrice) / 3) * i;
        moneyList.value.push(`${parseInt(price)}(profit:${formatAmount(price * rebateRatio) })`);
        payList.value.push(parseInt(price));
    }
    moneyList.value.push(`${maxPrice}(profit:${formatAmount(maxPrice * rebateRatio) })`);
    payList.value.push(maxPrice);
});

//提交订单
const onSubmit = async () => {
    if (amount.value > userInfo.value.balance - userInfo.value.freezeBalance) {
        showToast({ title: 'Insufficient balance' });
        return;
    }
    const res = await addOrder({ goodsId: detail.value.id, goodsPrice: amount.value, couponId: coupons.value.id,configId:detail.value.configId });
    if (res.code !== 200) {
        return;
    }
    emits('onClose');
};

//选中内容
const bindPickerChange = (e: any) => {
    moneyKey.value = e.detail.value;
    amount.value = payList.value[moneyKey.value];
};

//关闭服弹窗
const onClose = (val: any) => {
    if (val.addedRate) {
        isUsed.value = true;
        coupons.value = val;
    }
    couponsRef.value.close();
};

//选择优惠劵
const onCoupon = (val: any) => {
    if (!amount.value) {
        showToast({ title: 'Please select  Amount' });
        return;
    }
    couponsRef.value.open('bottom');
};
</script>
<style lang="scss" scoped>
.grey {
    color: #bbb;
    font-size: 28rpx;
}
.pay-container {
    background: #fff;
    height: 660rpx;
    border-radius: 30rpx 30rpx 0 0;
    padding: 0 30rpx;
    .title {
        padding: 70rpx 0;
        text-align: center;
        font-size: 46rpx;
        font-weight: 600;
    }
    .input-wrap {
        display: flex;
        align-items: center;
        height: 100rpx;
        border-bottom: 1rpx solid #e5e5e5;
        .label {
            width: 40rpx;
            font-size: 40rpx;
            font-weight: 600;
        }
        .content {
            flex: 1;
        }
    }
    ::v-deep .wd-input__inner {
        font-size: 40rpx;
        font-weight: 600;
    }
    .form-tips {
        margin-top: 30rpx;
        display: flex;
        font-size: 28rpx;
        .all-text {
            margin-left: 20rpx;
            color: #0866ff;
        }
    }
    .coupon-item {
        margin-top: 40rpx;
        height: 98rpx;
        background: #f0f2f5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 24rpx;
        padding: 0 30rpx;
        font-size: 24rpx;
        .name {
            text {
                color: rgb(238, 10, 36);
                margin-left: 4rpx;
            }
        }
        .content {
            display: flex;
            align-items: center;
            text {
                color: #0866ff;
            }
        }
    }
    .btns {
        margin-top: 30rpx;
        background: #e4e6eb;
        color: #bcc0c4;
        height: 98rpx;
        display: flex;
        border-radius: 24rpx;
        align-items: center;
        justify-content: center;
    }
    .active {
        background: #0866ff;
        color: #fff;
        &:active {
            opacity: 0.7;
        }
    }
}
</style>
